<template>
    <div id="allocation_details">
        <el-dialog
        title="调拨单"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :before-close="handleClose">
            <el-form v-model="formData"  label-width="80" style="background: #fff1f1; border-radius: 4px">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="调拨单号:">
                            <div class="grid-content">
                                {{formData.transferOrderId}}
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="调出门店:">
                            <div class="grid-content">
                                {{formData.senderStore}}
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="调入门店:">
                            <div class="grid-content">
                                {{formData.receiverStore}}
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请日期:">
                             <el-tooltip class="item" effect="dark" :content="formData.gmtApply" placement="top-start">
                                <div class="grid-content">
                                    {{formData.gmtApply}}
                                </div>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="品牌数量:">
                            <div class="grid-content">
                                {{formData.brandCount}} 个
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="任务状态:">
                            <div class="grid-content">
                                <el-tag type="success" size="small" v-if="formData.approveStatus">

                                    {{formData.approveStatus === 0 ? '待提交' : formData.approveStatus === 1 ? '待审批' :
                                     formData.approveStatus === -1 ? '已拒绝' : formData.approveStatus === 2   ? (formData.outCount > formData.outCompleteCount ? '出库' + formData.outCompleteCount + '/' +formData.outCount : '已出库') : ''}}
                                </el-tag>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="调拨件数:">
                            <div class="grid-content">
                                {{formData.applyQty}} 件
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="审核人:" v-if="detailsType == 2 && (formData.approveStatus === 2 || formData.approveStatus === -1)">
                            <div class="grid-content">
                                {{formData.approveUser}}
                            </div>
                        </el-form-item>
                        <el-form-item label="出库件数:" v-if="detailsType == 1">
                            <div class="grid-content">
                                {{formData.pickingQty}} 件
                            </div>
                        </el-form-item>
                        
                    </el-col>
                </el-row>
            </el-form>
            <div class="brands_box" v-if="brandList.length>0">
                <el-button type="primary" :class="item.isActive ? 'isChecked' : ''" size="small" v-for="(item, index) in brandList" :key="index" @click="handleClick(item)">
                    {{item.brandName}}
                </el-button>
            </div>
            <div class="allocation_detail" v-if=" formData.approveStatus == 2">
                <el-form label-width="80" style="background: #fff1f1; border-radius: 4px" >
                    <el-row :gutter="20" v-for="(item, index) in expressList" :key="index">
                        <el-col :span="9">
                            <el-form-item label="单号:">
                                <div class="grid-content">
                                    {{item.stockOutOrderId}}
                                    <span style="color:#ff7068; font-size: 12px">
                                        ({{item.stockoutStatus === 0 ? '待出库' : item.stockoutStatus === 1 ? '待发货' : item.stockoutStatus === 2 ? '已发货' : ''}})
                                    </span>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="出库人:">
                                <div class="grid-content">
                                    {{item.bizUser}}
                                </div>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="4">
                            <el-form-item label="出库状态:">
                                <div class="grid-content">
                                    {{item.stockoutStatus === 0 ? '待出库' : item.stockoutStatus === 1 ? '待发货' : item.stockoutStatus === 2 ? '已发货' : ''}}
                                </div>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="5">
                            <el-form-item label="快递公司:">
                                <div class="grid-content">
                                    {{item.expressName}}
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="快递单号:">
                                <el-tooltip class="item" effect="dark" :content="item.expressOrderId" placement="top-start">
                                    <div class="grid-content">
                                        {{item.expressOrderId}}
                                    </div>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            
            <el-table stripe :data="tableData" border style="margin-bottom: 10px">
                <el-table-column label="SKU" prop="skuCode" width="150"></el-table-column>
                <el-table-column label="SPU" prop="spuCode"></el-table-column>
                <el-table-column label="品牌" prop="brandName"></el-table-column>
                <el-table-column label="规格" prop="specName"></el-table-column>
                <el-table-column label="可用库存" prop="stockQty"></el-table-column>
                <el-table-column label="调拨数量" width="80" prop="applyQty"></el-table-column>
                <el-table-column v-if="detailsType == 2" label="出库数量" width="80" prop="pickingQty"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer" v-if="formData.approveStatus === 1 && detailsType == 2">
                <el-button size="small" @click="handleAgree">同 意</el-button>
                <el-button size="small" type="primary" @click="handleRefuse">拒 绝</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        props: ['isShowDetails', 'detailsType', 'transferId'],
        computed: {
            dialogVisible: {
                get() {
                    return this.isShowDetails
                },
                set() {}
            }
        },
        data() {
            return {
                userInfo: JSON.parse(sessionStorage.getItem('userInfo')),
                formData: {},
                tableData: [],
                brandList: [],
                expressList: []
            }
        },
        created() {
            this.$nextTick(() => {

                this.getAllocationDetails()
            })
        },
        mounted() {
            this.getPickingExpress()
        },
        methods: {
            /**获取调拨任务详情 */
            async getAllocationDetails() {
                try{
                    await this.$server.stockControlApi.checkAllocationDetails(this.transferId).then(res => {
                        
                        this.formData= res.data.transferViewOrderVo
                        res.data.transferViewBrandVos.forEach((item, index) => {
                            if(index === 0) {
                                item.isActive= true  
                            }else{
                                item.isActive= false
                            }
                        })
                        this.brandList= res.data.transferViewBrandVos
                    })
                    if(this.brandList.length > 0) {
                        console.log(this.brandList, '2')
                        this.getAllocationGoodsBycode(this.brandList[0].brandCode)
                    }
                }catch(err) {this.$paramsError(err)}
            },
            getPickingExpress() {
                try {
                    this.$server.stockControlApi.getPickingExpress(this.transferId).then(res => {
                        this.expressList= res.data
                    })
                }catch(err) {this.$paramsError(err)}
            },
            getAllocationGoodsBycode(code) {
                console.log(code, 'code')
                try {
                    let query= {
                        transferId: this.transferId,
                        brandCode: code
                    }
                    console.log(query)
                    this.$server.stockControlApi.getAllocationGoodsByBrandCode(query).then(res => {
                        this.tableData= res.data
                    })
                }catch(err) {this.$paramsError(err)}
            },
            handleClose() {
                this.$confirm('确认关闭？').then(_ => {
                    this.$emit('cancelShow', false)
                }).catch(_ => {});
            },
            /**通过品牌获取商品 */
            handleClick(item) {
                //item.isActive= true
                this.brandList.forEach(itemo => {
                    if(itemo.brandCode != item.brandCode) {
                        itemo.isActive= false
                    }else{
                        itemo.isActive= true
                        this.getAllocationGoodsBycode(item.brandCode)
                    }
                })
            },
            /**审批调拨任务 */
            handleChangeAllocationStatus(type) {
                try{let params= {
                    approveStatus: type,
                    approveUser: this.userInfo.personName,
                    approveUserId: this.userInfo.userId,
                    transferId: this.transferId
                }
                this.$server.stockControlApi.changeAllocationStatus(params).then(res => {
                    this.$emit('cancelShow', false)
                    this.$emit('getAllocationAuditList')
                })}catch(err) {this.$paramsError(err)}
            },
            /**同意 */
            handleAgree() {
                this.handleChangeAllocationStatus(2)
            },
            /**拒绝 */
            handleRefuse() {
                this.handleChangeAllocationStatus(-1)
            }
        }
    }
</script>
<style lang="less" scoped>
    .brands_box {
        box-sizing: border-box;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 10px;
        background: #fff1f1;
    }
    .isChecked {
        background: #e60012;
    }
</style>